<template>
  <!-- 企业详情 -->
  <view class="passBusinessDetails">
    <scroll-view class="root-inner" scroll-y>
      <view class="wrapper">
        <view class="wrapper-item wrapper-zero">
          <view class="patient-name">
            {{wbMentalPatientBean.name}}
            <view v-if="wbDeviceInfoBean.onLine === '1'" class="device-status ">
              设备在线
            </view>
            <view v-if="wbDeviceInfoBean.onLine === '0'" class="device-status device-offline">
              设备离线
            </view>
          </view>
          <view class=" wrapper-facility">
            <view class="facility-item">
              <view class="label">身份证号:</view>
              <view class="value valueName">
                {{ encryptIDCard(wbMentalPatientBean.idCard) || '暂无' }}
              </view>
            </view>
          </view>
          <view class="text-picture">
            <view class="lt">
              <view class="wrapper-facility">
                <view class="facility-item">
                  <view class="label">主要负责人:</view>
                  <view class="value valueName">
                    {{ `${wbHelpInfoBean.helpName}(${wbHelpInfoBean.helpPhone})`  || '暂无' }}
                  </view>
                </view>
                <view class="facility-item">
                  <view class="label">责任医疗机构:</view>
                  <view class="value valueName">
                    {{ wbMentalPatientBean.responsibleOrganization || "暂无" }}
                  </view>
                </view>
                <view class="facility-item">
                  <view class="label">现居地址:</view>
                  <view class="value valueName">
                    {{ wbHelpInfoBean.orgName || "暂无" }}
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view class="patient-avatar">
            <image class="p-bg" :src="baseImgUrl + 'patient-bg.png'" mode=""></image>
            <view class="p-btn">
              <text class="level-patient">
                {{`${wbMentalPatientBean.patientLevel}级精神障碍`}}
              </text>
              <image class="avatar-img-style"
                :src="wbMentalPatientBean.userImg ? imgPrefix + wbMentalPatientBean.userImg : baseImgUrl + 'patient-empty.png'">
              </image>
            </view>

          </view>
        </view>

        <view class="wrapper-item">
          <view class="wrapper-bar">
            <view class="wrapper-bartitle"> 基础功能 </view>
          </view>
          <view style="padding-top: 20rpx"><u-line></u-line></view>
          <view class="wrapper-body list-wrapper">
            <view class="item funItem" v-for="(item, index) in funClassifyList" :key="index"
              @click="handleDetail(item)">
              <image class="img" :src="item.icon"></image>
              <view class="text">{{ item.text }}</view>
            </view>
          </view>
        </view>
        <template v-if="wbDeviceInfoBean.imei">
          <view class="wrapper-item">
            <view class="wrapper-bar">
              <view class="wrapper-bartitle"> 腕表设备 </view>
            </view>

            <view style="padding-top: 20rpx"><u-line></u-line></view>
            <view class="wrapper-body">
              <view class="list-wrapper">
                <view class="item" v-for="(item, index) in tercelList" :key="index" @click="handleDeviceDetail(item)"
                  style="margin-bottom: 40rpx">
                  <image class="img-icon" :src="item.icon"></image>
                  <view class="text">{{ item.text }}</view>
                </view>
              </view>
            </view>
          </view>
        </template>
      </view>
    </scroll-view>
    <yy-watermark></yy-watermark>
  </view>
</template>

<script>
  import {
    findWaitSignCount,
    helpinfoDetails,
    helpinfoDeviceDetails,
    inspectionCategory
  } from "../api/api";
  import {
    getRole
  } from "../config";
  import {
    getAction,
    postAction
  } from "../utils/request";
  import {
    featuredIndustry
  } from "@/api/home.js";
  import {
    companyChangeDetail,
    messageDetail,
    userFindResponsible,
  } from "@/api/myself.js";
  import {
    handleClickRouter,
    isLoading,
    pvwImage,
    Toast,
    customSubmitStyleFull,
    navTo,
    computedDistance,
    getposition,
    getLocation,
    navBack,
    getOptionsParams,
    encryptIDCard
  } from "@/utils/util.js";

  export default {
    data() {
      const role = getRole()
      return {
        customSubmitStyleFull,
        baseImgUrl: this.$baseImgUrl,
        detail: {},
        options: {},
        imgPrefix: uni.getStorageSync("imgPrefix"),
        personImage: "", // 法人照片
        companyStatus: "", //状态   1.审核中 2.审核通过 3.审核失败 4.退出纳管
        //   基础功能
        funClassifyList: [{
            id: 1,
            text: "病患档案",
            value: 0,
            icon: this.$baseImgUrl + 'base-1.png',
            url: "/wristWatch/patientDoc",
          },
          {
            id: 3,
            text: "爱心关怀小组",
            value: 0,
            icon: this.$baseImgUrl + 'base-2.png',
            url: "/wristWatch/careGroup",
          },
          {
            id: 7,
            text: "关怀打卡",
            value: 0,
            icon: this.$baseImgUrl + 'base-3.png',
            url: "/wristWatch/caringCheck",
          },
          {
            id: 4,
            text: "吃药记录",
            value: 0,
            icon: this.$baseImgUrl + 'base-4.png',
            url: "/wristWatch/takeMedicine",
          },
          {
            text: "发病记录",
            value: 0,
            icon: this.$baseImgUrl + 'base-5.png',
            url: "/wristWatch/illHealthRecord",
          },
        ],
        // 特色功能
        tercelList: [{
            text: "设备管理",
            icon: this.$baseImgUrl + 'base-6.png',
            url: "/wristWatch/deviceList",
          },
          {
            text: '实时数据',
            url: '/wristWatch/realTimeData',
            icon: this.$baseImgUrl + 'wb-device-1.png',
          },
          {
            text: '活动轨迹',
            url: '/wristWatch/activityTrack',
            icon: this.$baseImgUrl + 'wb-device-2.png',
          },
          {
            text: '拨打设备',
            url: '',
            icon: this.$baseImgUrl + 'wb-device-3.png',
          },
          {
            text: '远程拾音',
            url: '/wristWatch/removePickup',
            icon: this.$baseImgUrl + 'wb-device-4.png',
          },
          {
            text: '电子围栏',
            url: '/wristWatch/electronicFence',
            icon: this.$baseImgUrl + 'wb-device-5.png',
          },
          {
            text: '预警处置',
            url: '/wristWatch/alarm/index',
            icon: this.$baseImgUrl + 'wb-device-6.png',
          }
        ],
        whiteUrlList: ['/featuredIndustries/pawnRecordList/pawnRecordList', '/featuredIndustries/junkList/junkList',
          '/featuredIndustries/bulkOil/bulkOil', '/featuredIndustries/secondHandMobile/secondHandMobile',
          '/featuredIndustries/unblanking/unblanking'
        ],
        show: false,
        showCheckItem: false,
        currentType: '',
        checkName: '',
        timer: null,
        role: role,
        inspectionList: [],
        lastRecord: [],
        showWait: false,
        waitSignCount: 0,
        routerParams: {},
        scrollViewHeight: 0,
        systemInfo: {},
        checkButtonHeight: 0,
        btnKey: 0,
        popupRef: null,
        checkTop: 0,
        selectHeieght: 0,
        checkTopValue: 0,
        wbDeviceInfoBean: {},
        wbMentalPatientBean: {},
        wbHelpInfoBean: {},
        mapPoliceBean: {}
      };
    },
    computed: {
      showLastCheck() {
        return ['fj'].includes(this.role) && !!this.lastRecord.length
      }
    },
    async onLoad(options) {
      this.routerParams = getOptionsParams(options)
      this.initData()
    },
    onReady() {
      // const systemInfo = uni.getSystemInfoSync();
      // const windowHeight = systemInfo.windowHeight
      // this.systemInfo = systemInfo

      // uni.createSelectorQuery().select('#btn-dom').boundingClientRect((rect) => {
      //   const {
      //     height
      //   } = rect
      //   const scrollHeight = windowHeight - height
      //   this.scrollViewHeight = scrollHeight
      // }).exec();
      // this.checkTop = parseInt(windowHeight * 0.6)
      // this.checkTopValue = parseInt(windowHeight * 0.4)
      // this.computedSelectHeight()
    },
    onShow() {},
    onUnload() {
      clearInterval(this.timer)
    },
    methods: {
      encryptIDCard,
      handleClickRouter,
      pvwImage,
      initData() {
        helpinfoDetails({
            id: this.routerParams.id
          })
          .then((res) => {
            const {
              wbDeviceInfoBean = {},
                wbMentalPatientBean,
                wbHelpInfoBean,
                mapPoliceBean,
                thisIsResponsible
            } = res.result
            this.wbDeviceInfoBean = wbDeviceInfoBean
            this.wbMentalPatientBean = wbMentalPatientBean
            this.wbHelpInfoBean = wbHelpInfoBean
            this.mapPoliceBean = mapPoliceBean
            this.thisIsResponsible = thisIsResponsible
          })
      },
      handleDeviceDetail(item) {
        if (item.text === '拨打设备') {
          if (!this.wbDeviceInfoBean.simNumber) {
            Toast('未获取到手机号！')
            return
          }
          uni.makePhoneCall({
            phoneNumber: this.wbDeviceInfoBean.simNumber
          })
          return
        }
        navTo({
          url: item.url,
          params: {
            ...this.wbDeviceInfoBean,
            ...this.wbMentalPatientBean,
            thisIsResponsible: this.thisIsResponsible
          }
        })
      },
      handleDetail(item) {
        let params = {
          url: item.url
        }

        params.params = {
          ...this.wbMentalPatientBean,
          thisIsResponsible: this.thisIsResponsible
        }
        // 如果是患者档案, 需要特殊处理的
        if (item.text === '病患档案') {
          params.params = {
            mapPoliceBean: this.mapPoliceBean,
            wbDeviceInfoBean: this.wbDeviceInfoBean,
            wbMentalPatientBean: this.wbMentalPatientBean,
            wbHelpInfoBean: this.wbHelpInfoBean
          }
        }
        navTo(params)
      }
    }
  };
</script>

<style>
  page {
    width: 100%;
    background-color: #f3f3f3 !important;
    height: 100%;
  }
</style>
<style lang="scss" scoped>
  .passBusinessDetails {
    background-color: #f3f3f3;
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
    height: 100%;

    .root-inner {
      display: flex;
      flex-direction: column;
      width: 100%;
      overflow-y: scroll;
    }

    .bgColor {
      width: 100%;
      height: 240rpx;
      background: #2488f5;
      position: absolute;
      top: 0;
      left: 0;
    }

    .wrapper {
      margin-left: auto;
      margin-right: auto;
      padding-top: 17rpx;
      position: relative;
      z-index: 10;
      width: 702rpx;
      overflow-y: scroll;
      // min-height: 0;

      .patient-name {
        display: flex;
        margin-bottom: 30rpx;

        .device-status {
          padding: 2rpx 16rpx;
          background: #DFFFF4;
          border-radius: 19rpx 19rpx 19rpx 19rpx;
          font-weight: 500;
          font-size: 24rpx;
          color: #03A163;
          margin-left: 12rpx;
        }

        .device-offline {
          background: #EDEDED;
          color: #AAAAAA;
        }
      }




      .wrapper-item {
        margin-bottom: 1vh;
        padding: 35rpx 40rpx;
        background-color: #ffffff;
        border-radius: 10rpx;
        width: 702rpx;

        .patient-avatar {
          position: absolute;
          right: 13rpx;
          top: -13rpx;
          width: 178rpx;
          height: 216rpx;

          .p-bg {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            z-index: 0;
          }

          .p-btn {
            position: relative;
            z-index: 10;
            text-align: center;

            .level-patient {
              padding: 2rpx 10rpx;
              background: #FDF3BE;
              border-radius: 16rpx 16rpx 16rpx 16rpx;
              font-weight: 400;
              font-size: 22rpx;
              color: #F3A024;
              white-space: nowrap;
              z-index: 1;
            }

            .avatar-img-style {
              width: 126rpx;
              height: 126rpx;
              margin-top: 21rpx;
              border-radius: 50%;
            }
          }
        }

        .label {
          width: unset;
          margin-right: 12rpx;
          min-width: unset;
          flex-shrink: 0;
        }

        .wrapper-body {
          padding-top: 20px;
        }

        .list-wrapper {
          display: flex;
          font-size: 24rpx;
          flex-wrap: wrap;
          color: #272727;
          bottom: 14.543vh;
          left: 25rpx;

          .item {
            position: relative;
            text-align: center;
            width: 25%;

            .badgeText {
              top: -15rpx;
              right: 18rpx;
            }

            .img {
              margin-bottom: 1vh;
              width: 88rpx;
              height: 88rpx;
            }

            .img-icon {
              margin-bottom: 1vh;
              width: 88rpx;
              height: 88rpx;
            }

            .text {
              color: #343434;
              font-size: 26rpx;
              line-height: 1;
            }
          }

          .funItem:nth-of-type(-n + 8) {
            padding-bottom: 30rpx;
          }
        }

        .text-picture {
          display: flex;
          justify-content: space-between;

          .lt {
            width: 425rpx;
            max-width: 425rpx;

            .name {
              font-size: 30rpx;
              font-family: PingFang SC;
              font-weight: bold;
              margin-bottom: 17rpx;
              margin-top: 20rpx;
            }
          }

          .rt {
            width: 144rpx;
            height: 138rpx;
            margin-left: 20rpx;

            image {
              width: 100%;
              height: 100%;
            }
          }
        }

        .feature-class {
          text-align: center;
          font-size: 24rpx;
          font-weight: 500;
          color: #858894;

          image {
            display: inline-block;
            margin-bottom: 10rpx;
            width: 85rpx;
            height: 50rpx;
          }
        }
      }

      .wrapper-bar {
        display: flex;
        justify-content: space-between;
        height: 40rpx;

        .wrapper-bartitle {
          font-size: 30rpx;
          font-weight: bold;

          text {
            display: inline-block;
            margin-left: 8px;
            color: #ababab;
            font-size: 28rpx;
          }

          image {
            margin-bottom: -3rpx;
            margin-right: 10rpx;
            width: 36rpx;
            height: 36rpx;
          }
        }
      }

      .wrapper-zero {
        border-radius: 0 0 10rpx 10rpx;
        position: relative;

        .logout {
          padding: 3rpx 14rpx;
          background: #FEF0EF;
          border-radius: 28rpx 28rpx 28rpx 28rpx;
          border: 1rpx solid #EEAAA7;
          font-weight: 500;
          font-size: 20rpx;
          color: #E43D33;
          margin-left: 12rpx;
        }
      }
    }

    .last-check-wrapper {
      background: #FFFFFF;
      box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(180, 180, 180, 0.16);
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      padding: 0 30rpx 27rpx 30rpx;

      .title-text {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 28rpx;
        border-bottom: 1rpx solid #E4E4E4;
        height: 87rpx;

        .l-text {
          font-weight: bold;
          font-size: 32rpx;
          color: #000000;
        }

        .r-wrapper {
          font-weight: 400;
          font-size: 28rpx;
          color: #A1A1A1;
          display: flex;
          align-items: center;
        }
      }

      .c-item {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;

        .c-label {
          font-weight: 400;
          font-size: 28rpx;
          color: #A1A1A1;
          flex-shrink: 0;
          margin-right: 4rpx;
        }

        .c-value {
          font-weight: 500;
          font-size: 28rpx;
          color: #212020;
        }
      }
    }

    .check-btn {
      width: 100%;
      height: 120rpx;
      background: #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: center;
      // position: absolute;
      // bottom: 0;
      // left: 0;
      // z-index: 11;

      .check-btn-style {
        width: 640rpx;
        height: 80rpx;
        background: #2488F5;
        border-radius: 40rpx 40rpx 40rpx 40rpx;
        border: 1rpx solid #306BD9;
        font-weight: 500;
        font-size: 30rpx;
        color: #F9F9F9;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    .location-wrapper {
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      text-align: center;

      .l-img {
        width: 246rpx;
        height: 246rpx;
      }

      .l-text {
        font-weight: bold;
        font-size: 36rpx;
        color: #000000;
        margin-top: 44rpx;
        margin-bottom: 30rpx;
      }

      .l-sub-text {
        font-weight: 500;
        font-size: 28rpx;
        color: #666666;
      }
    }


    .popup-style {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 10;
      background: rgba(0, 0, 0, 0.4);
      width: 100%;
      height: 100%;
      overflow: hidden;

      .close-icon {
        position: absolute;
        right: 15rpx;
        top: 15rpx;
        z-index: 20;
      }
    }

    .tenant-info-wrapper {
      display: flex;
      flex-direction: column;
      position: absolute;
      left: 0;
      width: 100%;
      background: #fff;

      #tenant-info-wrapper-dom {
        height: 100%;
        display: flex;
        flex-direction: column;

      }

      .top-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 134rpx;
        padding: 0 18rpx;

        .p-title {
          font-weight: bold;
          font-size: 30rpx;
          color: #101010;
        }
      }

      .p-container {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;

        .select-box-wrapper {
          overflow-y: auto;

          .select-box-inner {
            height: 344rpx;
            overflow: auto;
          }
        }

        /deep/.u-radio-group--row {
          flex-direction: column;
        }

        .p-item {
          width: 100%;
          padding: 0 35rpx;
          display: flex;

          .p-item-wrapper {
            display: flex;
            width: 100%;
            justify-content: space-between;
            background: #F9FCFF;
            border-radius: 8rpx 8rpx 8rpx 8rpx;
            margin-bottom: 20rpx;
            padding: 30rpx 38rpx 27rpx 42rpx;

            .p-name {
              font-weight: bold;
              font-size: 36rpx;
              color: #333333;
              margin-bottom: 16rpx;
            }

            .p-text {
              font-weight: 400;
              font-size: 26rpx;
              color: #BBBBBB;
            }
          }

          .p-active {
            border: 1rpx solid #2488F5;
          }
        }

        .p-button {
          padding: 36rpx 0;
          display: flex;
          justify-content: center;

          /deep/ .u-button__text {
            font-size: 36rpx !important;
          }
        }
      }
    }

    .ccie-details {
      color: #2488f5;
    }

    .sifn-info-wrapper {
      display: flex;
      flex-direction: column;
      position: relative;
      width: 100%;

      .title-text {
        font-weight: 500;
        font-size: 36rpx;
        color: #FFFFFF;
        position: absolute;
        z-index: 1;
        top: 38rpx;
        left: 50%;
        transform: translateX(-50%);
      }

      .l-img {
        width: 680rpx;
        height: 328rpx;
        position: absolute;
        left: 0;
        top: -217rpx;
      }

      .company-name {
        padding-top: 50rpx;
        font-weight: bold;
        font-size: 30rpx;
        color: #000;
        padding-top: 161rpx;
        text-align: center;
        margin-bottom: 10rpx;
      }

      .l-text {
        font-weight: 500;
        font-size: 30rpx;
        color: #656565;
        margin-bottom: 60rpx;
        text-align: center;
      }

      .l-sub-text {
        width: 400rpx;
        height: 88rpx;
        background: #2488F5;
        border-radius: 44rpx 44rpx 44rpx 44rpx;
        border: 1rpx solid #ACCBEC;
        font-weight: 500;
        font-size: 36rpx;
        color: #F9F9F9;
        text-align: center;
        margin: 0 auto;
        line-height: 88rpx;
        margin-bottom: 70rpx;
      }
    }

    .sign-wait-box {
      /deep/.u-popup {
        .u-modal__content {
          padding: 0 !important;
        }

        .u-popup__content,
        .u-modal {
          overflow: unset !important;
        }
      }
    }


  }
</style>